Description

This PR introduces a new floating card and dialog for Studio announcements
This is mandated, by our internal admin studio in which you can define a a new productAnnouncement document to push an announcement into the studios.

It also exports this new components for them to be consumed in the product announcement studio previews.

How does it works?

We go into the admin studio and create a new productAnnouncement document and publish it.
This document will be fetched by the new /announcements api and returned to the studio.
When a new visitor opens the studio, we will fetch data from two places:

• /announcements will return the existing announcements, the user could have seen or not. The announcements have a "expiryDate" so this list should be fairly small.
• keyValueStore with the key studio.announcement.seen which will return the list of the ids of the seen announcements.
• The existing announcements will be checked against the seen ones, if at least one announcement is unseen the floating card will show to the user.
• Clicking the floating card opens a dialog with the announcement, closing the dialog marks the announcement as seen
• Dismissing the card, marks the announcement as seen.
• Next time the user opens the studio, the seen announcement will be returned by the key value store so he will only see each announcement once.

Announcements could contain an expiry date, so we don't expect the /announcements api to return a big number of announcements.

How do we keep the key value store data small?

Given announcements will contain an expiry date, we should not receive a big number of announcements from the /announcements API.
We are only going to store as seen the announcements that are returned from the API, we are not keeping the history of all the seen announcements the user has.

Scenario:

• /announcements API returns 1 document with id foo, user sees that announcement, we will save to the key value store the id of that seen announcement. That user will have saved the value ["foo"]
• A new announcement is added, /announcements API returns now 2 documents with id foo and bar, user has seen foo so he will see the floating card for announcement bar. When closing the dialog or dismissing the card, we will save to the key value store the two ids. ["foo", "bar"]
• A new announcement is added and foo is removed. Now the api returns bar and baz, user sees baz , we will update the key value store to ["bar", "baz"], given foo is not returned anymore we don't need to know if the user has seen it or not.

See tests for this behavior

A reset announcements query param can be provided to reset the seen announcements state.
/structure?reset-announcements=foo,bar

What to review

Are the changes correct?
Is it possible to do this in other ways?

Testing

Tests covering the new scenarios have been added
Browser testing is possible by visiting https://test-studio-git-studio-announcements.sanity.dev/staging, you should be prompted with the new card first time visiting. (Remember to use ?reset-announcements to see the flow again)

Notes for release

Adds studio announcements to the studio

It implements:

• GRO-2497
• GRO-2494
• GRO-2493
• GRO-2499
• GRO-2495
• GRO-2496
• GRO-2498